<template>
  <div>
    <div>PiniaView.vue</div>
    <el-button @click="counterStore.increment()" type="primary">加</el-button>
    <el-button @click="counterStore.decrement()">减</el-button>
    <div>count: {{ counterStore.count }}</div>
    <div>doubleCount: {{ counterStore.doubleCount }}</div>
    <div>name: {{ counterStore.name }}</div>
    <el-button @click="counterStore.changeName('newName')">changeName</el-button>
    <div>
      <PiniaCom />
    </div>
    <div style="margin-top: 20px; padding: 10px; border: 1px solid #000">
      <div>shopStore</div>
      <div v-for="(item, index) in shops" :key="index">
        {{ index }} - {{ item.name }} - {{ item.address }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import PiniaCom from '@/components/PiniaComponent.vue'
const counterStore = useCounterStore()
console.log(counterStore)

import { useShopStore } from '@/stores/shopStore'
import { storeToRefs } from 'pinia'
const shopStore = useShopStore()
const { shops } = storeToRefs(shopStore)
console.log('shops', shops)
</script>

<style scoped></style>
